
<ul class="posts">
    {% for post in posts %}
        <li class="post">
            <!-- <div class="profile-thumbnail">
                <a href="{{ url_for('main.user', username=post.author.username) }}"></a>
            </div>
            <div class="post-date">{{ moment(post.timestamp).fromNow() }}</div>
            <div class="post-author">
                <a href="{{ url_for('.user', username=post.author.username) }}">
                    {{ post.author.username }}
                </a>
            </div>
            <div class="post-title">{{ post.title }}</div>
            <div class="post-body">{{ post.body }}</div> -->

            <div class="container mt-5">
                <div class="d-flex justify-content-center row">
                    <div class="col-md-12">
                        <div class="d-flex flex-column comment-section">
                            <div class="bg-white p-2">
                                <div class="d-flex flex-row user-info"><img class="rounded-circle" src="{{ url_for('static', filename='images/girl.jpg') }}" width="80">
                                    <div class="d-flex flex-column justify-content-start ml-2">
                                        <span class="font-weight-bold title">标题：{{ post.title }}</span>
                                        <span class="d-block font-weight-bold name">
                                            <a href="{{ url_for('.user', username=post.author.username) }}">
                                                {{ post.author.username }}
                                            </a>
                                        </span>
                                        <span class="date text-black-50">{{ moment(post.timestamp).fromNow() }}</span>
                                    </div>
                                </div>
                                <div class="mt-2">
                                    <p class="comment-text">{{ post.body }}</p>
                                </div>
                            </div>
                            <div class="bg-white">
                                <div class="d-flex flex-row fs-12">
                                    <div class="like p-2 cursor"><i class="fas fa-thumbs-up"></i><span class="ml-1">Like</span></div>
                                    <div class="like p-2 cursor"><i class="far fa-comment-dots"></i><span class="ml-1">评论</span></div>
                                    <div class="like p-2 cursor"><i class="fa fa-share"></i><span class="ml-1">分享</span></div>
                                </div>
                            </div>
                            <div class="bg-light p-2">
                                <div class="d-flex flex-row align-items-start"><img class="rounded-circle" src="{{ url_for('static', filename='images/girl.jpg') }}" width="40"><textarea class="form-control ml-1 shadow-none textarea"></textarea></div>
                                <div class="mt-2 text-right"><button class="btn btn-primary btn-sm shadow-none" type="button">Post comment</button><button class="btn btn-outline-primary btn-sm ml-1 shadow-none" type="button">Cancel</button></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </li>
    {% endfor %}
</ul>
